<template>
	<view class="note">

		<uni-search-bar @confirm="search" v-model="searchValue" @clear="clear" cancelButton="none">
		</uni-search-bar>

		<!-- 	<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view> -->

		<!-- 自定义分段器 -->
		<view class="custom-segment">
			<view v-for="(item, index) in segmentItems" :key="index" class="segment-item"
				:class="{ 'active': current === index }" @click="handleSegmentClick(index)">
				<text>{{ item.text }}</text>
				<!-- 删除按钮 -->
				<view class="delete-btn" @click.stop="handleDelete(index)" v-if="item.deletable">
					<uni-icons type="closeempty" size="14" color="#999"></uni-icons>
				</view>
			</view>
		</view>


		<scroll-view scroll-y="true" class="scroll-Y">
			<view v-for="i in detailList" class="list-item" @click="()=>goTo(i)">
				<text class="delete" @click.stop="()=>deleteNote(i.id)">x</text>
				<view class="list-item-content">
					<view class="list-item-content-view">
						<view class="title">{{i.title}}</view>
						<mp-html class="rich-text" :content="i.content"></mp-html>
					</view>
					<view class="bottom">
						<text class="text ">创建于：{{i.createTime}} </text>
						<text class="text">作者：
							<!-- {{i.userId}}   -->
						</text>
					</view>
				</view>

			</view>

		</scroll-view>
		<button>
			<uni-icons type="plusempty" class="add-note" color="#fff" @click="()=>goTo(null)"></uni-icons>
		</button>

	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { noteCategoriesApi, notesApi } from "@/apis/apis"
	import { userStore } from '@/store/user'

	// 自定义分段器

	const segmentItems = ref([

	])


	const handleSegmentClick = (index : number) => {
		current.value = index;

		noteCategoryId.value = current.value == 0 ? null : noteCategory.value[current.value - 1]?.id

		getNotes()
	}

	const handleDelete = (index : number) => {

		uni.showModal({
			title: '确认删除',
			content: `确定要删除"${segmentItems.value[index].text}"分类吗？`,
			success: async (res) => {
				if (res.confirm) {


					console.log(res);
					const ids = segmentItems.value[index].id

					const del : any = await noteCategoriesApi.updateUsingDELETE({
						ids: ids
					})
					if (del.code === 200) {

						// 删除分类项
						segmentItems.value.splice(index, 1);

						// 调整选中项
						if (current.value >= index) {
							current.value = Math.max(0, current.value - 1);
						}


						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
					}





				}
			}
		});
	}



	const goTo = (note : any) => {
		if (note) userStore.setCurrentNote(note)
		uni.navigateTo({
			url: `/pages/note/addNote/addNote?pageType=${note && note.id ? 'edit' : 'add'}`
		})
	}
	const deleteNote = async (id : string) => {
		const res : any = await notesApi.deleteUsingDELETE({ idList: id })
		if (res.code === 200) {
			uni.showToast({ title: res.msg, icon: 'success' })
			getNotes()
		}
	}

	// 搜索
	const searchValue = ref(null)
	const search = (res : any) => {
		getNotes()
	}

	const cancel = () => { }

	const clear = () => {
		searchValue.value = null
		getNotes()
	}

	const stripQuotes = (str : any) => {
		return str/* ?.replace(/^"|"$/g, '') */
	}

	// 分段器

	const current = ref(0)
	const activeColor = ref('#007aff')
	const items = ref(['全部'])
	const styleType = 'text'
	const noteCategoryId = ref(null)
	const onClickItem = (e : any) => {
		if (current.value !== e.currentIndex) current.value = e.currentIndex

		noteCategoryId.value = current.value == 0 ? null : noteCategory.value[current.value - 1]?.id

		getNotes()
	}
	const SysUser = JSON.parse(uni.getStorageSync('SysUser') || '{}')
	// 列表
	const detailList = ref([

	])


	const noteCategory = ref([])
	// 初始化请求分类
	const getCategory = async () => {
		const res : any = await noteCategoriesApi.queryPageUsingPOST_7({ userId: SysUser.id })
		noteCategory.value = res.data.records
		userStore.setNoteCategory(res.data.records)

		segmentItems.value = [{ text: '全部', deletable: false, id: '' }]

		res.data.records.forEach((item : { categoryName : string; id : string }) => {
			items.value.push(item.categoryName)
			segmentItems.value.push({ text: item.categoryName, deletable: true, id: item.id })
		}

		)
	}

	// 初始化请求笔记
	const getNotes = async () => {
		const res : any = await notesApi.queryPageUsingPOST_8({

			content: searchValue.value,
			userId: SysUser.id
			, noteCategoryId: noteCategoryId.value


		})


		detailList.value = res.data.records
		console.log(detailList.value);

	}
	onLoad(() => {
		getCategory()
	})
	onShow(() => {
		getNotes()
	});
</script>

<style lang="scss" scoped>
	.note {
		padding: 20px;
		height: 100%;



		/* 自定义分段器样式 */
		.custom-segment {
			display: flex;
			background-color: #f8f8f8;
			border-radius: 40rpx;
			padding: 8rpx;
			position: relative;
			overflow-x: scroll;
		}

		.segment-item {
			flex: 1;
			text-align: center;
			padding: 5rpx 0;
			position: relative;
			border-radius: 20rpx;
			transition: all 0.3s;
			min-width: 60px;
		}

		.active {
			background-color: #fff;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
			font-weight: bold;
			color: #007AFF;
		}

		/* 删除按钮样式 */
		.delete-btn {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			width: 40rpx;
			height: 40rpx;
			background: #eee;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;
		}



		.scroll-Y {
			height: 700px;
		}

		// 明细列表
		.list-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			border: 1px solid #939597;
			margin-top: 30px;
			border-radius: 5px;
			position: relative;

			.delete {
				font-size: 15px;
				right: 10px;
				top: 5px;
				position: absolute;
			}

			.list-item-content {
				width: 100%;

				.title {
					margin-bottom: 5px;
				}


				.list-item-content-view {

					margin-bottom: 5px;

					.rich-text {
						font-size: 13px;
					}


				}

				.bottom {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.text {
						font-size: 12px;
					}


				}
			}

			.money {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}


		.add-note {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			position: fixed;
			background-color: #e99d42;
			bottom: 30px;
			right: 20px;
		}
	}
</style>